<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="comments"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!--    引入valine-->
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<body>
<div th:if="${article}!=null">
    <div th:id="${article.id ?: 0}" class="comment-container">
        <div id="comments" class="clearfix">
            <div th:if="${article.allowComment}">
                <span class="response">
                    <form name="logoutform" th:action="@{/logout}" method="post"></form>
                    <th:block sec:authorize="isAuthenticated()">
                        Hello，<a data-no-instant="" sec:authentication="name"></a>
                        如果你想 <a href="javascript:document.logoutform.submit();">注销</a> ?
                        <span style="color: pink">评论或者回复时,请单击一下下面的昵称文本框！</span>
                    </th:block>
                    <th:block sec:authorize="isAnonymous()">
                        用户想要评论或者查看评论，请先<a th:href="@{/loginPage}" title="登录" data-no-instant="">登录</a>!
                    </th:block>
                </span>

                <div id="vcomments" sec:authorize="isAuthenticated()">
                </div>

            </div>


        </div>
    </div>
</div>
</body>
<div th:replace="comm/tale_comment::tale_comment"></div>


<script th:inline="javascript">
    new Valine({
        el: '#vcomments',
        appId: 'xxx',
        appKey: 'yyy',
        placeholder: '请输入内容',
        pageSize: 3 ,
        recordIP: true,
        avatar:'',
        requiredFields: ['nick']
    });
    //隐藏div vheader
    // document.getElementsByClassName('vheader')[0].style.display="none";
    document.getElementsByClassName('vmail')[0].style.display="none";
    document.getElementsByClassName('vlink')[0].style.display="none";
     var name= [[${name}]];
     if(name!=null){
         //因为这个vnick文本框用了延迟加载，所以我们需要延迟更长的时间才能修改他
         function after(){
             document.getElementsByClassName('vnick')[0].value=name;
             document.getElementsByClassName('vmail')[0].value="";
             document.getElementsByClassName('vnick')[0].readOnly=true;
         }
         setTimeout("after()",100);
     }


</script>



</html>